<template>
	<view class="sp_content" >
       <view class="header_content">
            <view class="header_left">
                <view class="main_picture">
                    <view v-if="!dataInfo.main.hhImg" class="add_img" @click="handleUploadMain">
                        <text class="iconfont icon-jia1"></text>
                    </view>
                    <view  v-else class="img_box">
                        <image style="width: 100%; height: 100%;" mode="scaleToFill" :src="dataInfo.main.hhImg" />
                        <text @click="delMainimg()" class="iconfont icon-jian1"></text>
                    </view>
                </view>
            </view>

            <view class="header_right">
                <view class="info_top">
                    <view class="info_item">
                        <view class="label">品名:</view>
                        <input v-model="dataInfo.main.pm" placeholder="请输入品名" />
                    </view>

                    <view class="info_item">
                        <view class="label">货号:</view>
                        <input v-model="dataInfo.main.huohaoname" placeholder="请输入货号" />
                    </view>
                    <view class="info_item">
                        <view class="label">类别:</view>
                        <!-- <input v-model="dataInfo.main.huohaotype" placeholder="请输入类别" /> -->
                        <uni-data-select
							v-model="dataInfo.main.huohaotypebh"
							placeholder="请选择类别"
							:localdata="huohaotypeList"
							></uni-data-select>
                    </view>
                </view>

                <view class="info_item" style="flex: 1; display: flex; align-items: flex-start;">
                    <view class="label">商品详情:</view>
                    <textarea style="flex: 1;" v-model="dataInfo.main.component" placeholder="请输入商品详情"></textarea>
                </view>


                <view class="info_bottom">
                    <view class="info_item">
                        <view class="label">价格:</view>
                        <input type="number" v-model="dataInfo.main.xsprice" placeholder="请输入价格" />
                    </view>

                    <view class="info_item">
                        <!-- <view class="label">已订购:</view>
                        <view class="info_des">1000 件</view> -->
                    </view>
                </view>
            </view>
       </view>

       <view class="add_content">
           <!-- <button hover-class="hover_btn" @click="addColorImg">添加</button> -->
       </view>


       <view class="swiper_content">
           <scroll-view style="height: 100%; " scroll-x="true">
                <view style="display: flex; height: 100%;">
                    <view  style="margin-right: 10rpx;" v-for="(item, index) in dataInfo.colordetail" :key="index">
                        <view style="width: 120rpx; height: 80%; position: relative;" @click="changeImg(item)">
                            <image style="height: 100%; width: 100%; " :src='item.color_img || "" ' />
                            <!-- <text @click="delItemimg(item)" class="iconfont icon-jian1"></text> -->
                        </view>
                        <input style="text-align: center; border: 1rpx solid #ccc; margin-top: 10rpx; padding: 5rpx 0; width: 120rpx;" v-model="item.color" disabled placeholder="请输入颜色" />
                    </view>
                </view>
            </scroll-view>
       </view>

       <!-- 滑动下单页面 -->
       <view class="detail_content" style="background: #fff; margin: 20rpx 5rpx;">
            <!-- <view style="display: flex; margin-bottom: 20rpx;" v-if="newTableList.length">
                <view>下单: </view>
                <view>(点击颜色订单数量可以修改)</view>
            </view>
            <view style="background: #fff;" v-if="newTableList.length" @click="handlePopup">
                <uni-table border stripe emptyText="暂无更多数据" >
                    <uni-tr>
                        <uni-th  width="110" align="center">颜色/尺码</uni-th>
                        <uni-th align="center">合计</uni-th>
                        <uni-th align="center" v-for="(j, i) in newTableList[0].chima" :key="i">
                            {{ i }}
                        </uni-th>
                    </uni-tr>
                    <uni-tr v-for="(x, y) in newTableList" :key="y">
                        <uni-td align="center" v-if="x.hj != 0">{{ x.color }}</uni-td>
                        <uni-td align="center" v-if="x.hj != 0"> {{ x.hj }}</uni-td>
                        <uni-td align="center" v-if="x.hj != 0" v-for="(w, v) in x.chima" :key="v"> 
                            {{ w }}
                        </uni-td>
                    </uni-tr>

                </uni-table>
            </view> -->
       </view>

       <view class="bottom_content" style="background: #fff;">
            <button @click="goHome">
                <text class="iconfont icon-shouye"></text>
                <view>首页</view>
            </button>
            <button hover-class="hover_btn" class="save_btn" :disabled="showDisabled"  @click="submitForm()">确认修改</button>
       </view>
	</view>
</template>

<script>
import BottomPopup from '@/components/custom-bottom-popup/custom-bottom-popup.vue'; // 引入自定义组件
import centerPopup from '@/components/custom-center-popup/custom-center-popup.vue'; // 引入自定义组件
import addGoods from '@/components/add-goods/add-goods.vue'; // 引入自定义组件
import utils from "@/utils/utils.js";
import Http from '@/service/api'
import { mapState, mapMutations, mapActions } from "vuex";
	export default {
		components: {
			BottomPopup,
            centerPopup,
            addGoods,
		},
		data() {
			return {
                swiperImgList: [],
                showCollection: false, // 是否收藏
                dk: uni.getStorageSync('baseUrl'),

                tableList: [],
                newTableList: [],
                huohaobh: '', // 货号编号
                dataInfo: {
                    main: {},
                    colordetail: [],
                    chimadetail: [],
                }, // 详情数据

                childBackMap: {},
                huohaotypeList: [], // 类别列表
                showDisabled: false ,// 是否禁用
            }
		},
        computed: {
            ...mapState([
                "storesCart",
            ]),
        },
		onLoad(r) {
            this.huohaobh = r.huohaobh
            this.getHuohaoQueryInfo()

            console.log('== 11 ', uni.getStorageSync('loginData').LoginType )
		},
		methods: {

            submitForm() {
                let show = false
                this.dataInfo.colordetail.forEach(i => {
                    if (!i.color) {
                        show = true
                    }
                })
                if (show) {
                    uni.showToast({
						title: '请输入颜色',
						icon: 'none'
					});
                    return
                }

                let name = this.huohaotypeList.filter(i => i.value == this.dataInfo.main.huohaotypebh)[0]?.name

                let param = {
                    ...this.dataInfo,
                    uid: uni.getStorageSync('uid'),
                    main: {
                        ...this.dataInfo.main,
                        huohaotype: name
                    }
                }
                this.showDisabled = true
                Http.huohaoUpdate(JSON.stringify(param)).then(r => {
                    uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1
                        })
                    }, 800)

                }).catch(err => {
                    this.showDisabled = false
                    uni.showToast({
						title: err.message,
						icon: 'none'
					});
                })


            },
            handleUploadMain() {
                uni.chooseImage({
                    count: 1, // 最多选择1张图片
                    success: (res) => {
                        console.log('== res ', res )
                        this.dataInfo.main.hhImg =  res.tempFilePaths[0]

                        let param = {
                            Module: '货号维护',
                            ModulePrimaryKey: this.dataInfo.main.huohao,
                            sort: 0,
                            IsMain: 1,
                            customId: uni.getStorageSync('customId'),
                        }

                        console.log('== param ', param)

                        uni.uploadFile({ 
                            url: `https://${this.dk}/BaseInfo/SysHuohao/UploadAdd.aspx`,
                            filePath: res.tempFilePaths[0], //从调用页面传入 --path: imgbox, 选取图片的地址数组  
                            name: 'img',
                            formData: {
                              Module: '货号维护',
                              ModulePrimaryKey: this.dataInfo.main.huohao,
                              sort: 0,
                              IsMain: 1,
                              customId: uni.getStorageSync('customId'),
                            },
                            header: {
                                "Content-Type": "multipart/form-data",
                                "Authorization": 'Bearer ' + uni.getStorageSync('token'),
                            },
                            success: (r) => {
                                console.log('== img r ', r)
                                if (r.statusCode == 200) {
                                    let data = JSON.parse(r.data)
                                    if (data.code == 1) {
                                        uni.showToast({
                                            title:'图片上传成功',
                                            icon:'none',
                                            duration:3000
                                        })
                                    }

                                }
                                
                            },
                            fail: (err) => {
                                console.log('== img err ', err)
                                uni.showToast({
                                    title:'图片上传失败',
                                    icon:'none',
                                    duration:3000
                                })
                            }
                        })

                    },
                });
            },

            changeImg(item) {
                let _this = this
                uni.chooseImage({
                    count: 1, // 最多选择1张图片
                    success: (res) => {
                        console.log('== res ', res.tempFilePaths[0] )

                        uni.uploadFile({ 
                            url: `https://${_this.dk}/BaseInfo/SysHuohao/UploadAdd.aspx`,
                            filePath: res.tempFilePaths[0], //从调用页面传入 --path: imgbox, 选取图片的地址数组  
                            name: 'img',
                            formData: {
                              Module: '货号颜色维护',
                              ModulePrimaryKey: _this.dataInfo.main.huohao,
                              ModuleDetailKey: item.uploadguid,
                              sort: 0,
                              IsMain: 1,
                              customId: uni.getStorageSync('customId'),
                            },
                            header: {
                                "Content-Type": "multipart/form-data",
                                "Authorization": 'Bearer ' + uni.getStorageSync('token'),
                            },
                            success: (r) => {
                                console.log('== img r ', r)
                                if (r.statusCode == 200) {
                                    let data = JSON.parse(r.data)
                                    console.log('== data ', data)
                                    if (data.code == 1) {
                                        uni.showToast({
                                            title:'图片上传成功',
                                            icon:'none',
                                            duration:3000
                                        })
                                        // this.dataInfo = {
                                        //     ...this.dataInfo,
                                        //     colordetail: this.dataInfo.colordetail.map(i => ({
                                        //         ...i,
                                        //         color_img: item.uuid == i.uuid ? res.tempFilePaths[0] : i.color_img
                                        //     }))
                                        // }
                                        setTimeout(() => {
                                            this.getHuohaoQueryInfo()
                                        }, 600)
                                    }

                                }
                                
                            },
                            fail: (err) => {
                                console.log('== img err ', err)
                                uni.showToast({
                                    title:'图片上传失败',
                                    icon:'none',
                                    duration:3000
                                })
                            }
                        })
                        
                    },
                });
            },
            addColorImg() {
                uni.chooseImage({
                    count: 1, // 最多选择1张图片
                    success: (res) => {
                        console.log('== res ', res.tempFilePaths[0] )
                        this.dataInfo.colordetail.unshift({
                            color: '',
                            uuid: this.guid(),
                            color_img: res.tempFilePaths[0]
                        })
                    },
                });
            },
            delMainimg() {
                this.dataInfo.main.hhImg = ''
            },
            delItemimg(item) {
                let _this = this
                uni.showModal({
                    title: '提示',
                    content: `是否删除该图片？`,
                    success: function (res) {
                        if (res.confirm) {
                            let list = _this.dataInfo.colordetail.filter(i => i.uuid != item.uuid)
                            _this.dataInfo.colordetail = list
                        }
                    }
                });

            },


            goHome() {
                uni.switchTab({
					url: '../index/index'
				})
            },
            guid() {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                    var r = Math.random() * 16 | 0,
                        v = c == 'x' ? r : (r & 0x3 | 0x8);
                    return v.toString(16);
                });
            },
            getHuohaoQueryInfo() {
                let param = {
                    huohaobh: this.huohaobh,
                }
                Http.getHuohaoQueryInfo(param).then(r => {
                    this.dataInfo = {
                        ...r,
                        colordetail: r.colordetail.map(i => ({...i, uuid: this.guid()}))
                    }
                    this.GetBaseInfoList()
                    console.log('== dataInfo ', this.dataInfo)

                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: 'none'
                    });
                })
            },
            // 获取基础数据
			GetBaseInfoList() {
                let param = { param: 'huohaotype' }
                Http.GetBaseInfoList(param).then(r => {
                   console.log('== 11 基础数据 ', r)
                   this.huohaotypeList = r.huohaotype.map(i => ({...i, value: i.bh, text: i.name}))
                   
                }).catch(err => {
                    console.log('== err ', err)
                })
            },
            ...mapMutations([
                "addCart_x",
            ]),

            
		}
	}
</script>

<style lang="less" scoped>
.sp_content {
	height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    font-size: 16rpx;

    .header_content {
        display: flex;
        margin: 20rpx 5rpx;
        height: 300rpx;

        .header_left {
            width: 300rpx;
            height: 300rpx;
            background: #ccc;
        }

        .main_picture {
            width: 100%;
            height: 100%;
            background: #e5e5e5;

            .add_img {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .iconfont {
                    font-size: 40rpx;
                    color: #9a9a9a;
                }
            }

            .img_box {
                position: relative;
                width: 100%;
                height: 100%;

                .iconfont {
                    position: absolute;
                    top: 0rpx;
                    left: 0rpx;
                    color: red;
                    font-size: 40rpx;
                }
            }
        }

        .header_right {
            flex: 1;
            background: #fff;
            margin-left: 10rpx;
            padding: 5rpx 10rpx;
            overflow: hidden;

            display: flex;
            flex-direction: column;
        }

        .info_top {
            padding: 5rpx;
        }
        .info_item {
            display: flex;
            align-items: center;
            padding-bottom: 5rpx;

            input {
                flex: 1;
            }
        }

        .label {
            white-space: nowrap;
            color: #b6b6b6;
        }
        .info_des {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .info_des_content {
            flex: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 10; /* 显示三行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
        }

        .info_bottom {
            display: flex;
            justify-content: space-between;
        }


    }

    .add_content {
        background: #fff;
        padding: 10rpx 10rpx 15rpx;
        button {
            width: 120rpx;
            height: 40rpx;
            background: #f9a94d;
            color: #fff;
            margin: 0;
        }
        
    }

    


    .swiper_content {
        height: 240rpx;
        background: #fff;
        overflow: auto;
        padding: 5rpx;

        .iconfont {
            position: absolute;
            top: 0;
            left: 0;
            color: red;
            font-size: 30rpx;
        }
    }

    .detail_content {
        flex: 1; 
        padding: 10rpx;
    }

    .hover_btn {
        background: #e09846 !important;
    }

   .bottom_content {
        display: flex;
        align-items: center;
        button {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            color: #000;
            height: 60rpx;
            margin: 0rpx;
            border-radius: 0;
            .iconfont {
                font-size: 18rpx;
                margin-right: 10rpx;
            }
        }

        .save_btn {
            background: #f9a94d; 
            color: #fff;
        }

        button:nth-child(4) {
            background: #f9a94d;
            color: #fff;
        }
   }
}


</style>
